<template>
  <view class="poster">
    <zm-qrcode :show="false" :value="data.qrCode" :size="244" @success="handleQrCodeResult"></zm-qrcode>
    <zm-poster ref="poster" :width="width" :height="height" @ready="ready"></zm-poster>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
export default {
  name: "qrcode-poster",
  mixins: [hook, weixin],
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    width: {
      type: Number,
      default: 702
    },
    height: {
      type: Number,
      default: 1078
    }
  },

  data() {
    return {
      qrcode: "",
      codeRowHeight: 88 // 取票码背景高度
    }
  },
  methods: {
    handleQrCodeResult(r) {
      this.qrcode = r
    },
    ready() {},
    async draw() {
      const list = []
      const ticketInfo = this.data.ticketInfo
      const rowNum = ticketInfo.length // 展示的验证码行数
      const addHeight = (rowNum - 1) * 88
      const year = uni.$dayJs().year()
      // 头部背景
      list.push({ type: "rect", style: { top: 0, left: 0, width: 702, height: 256, borderRadius: [16, 16, 0, 0], backgroundColor: "#a24b37" } })
      // 头部缺口
      list.push({ type: "rect", style: { top: -35, left: 702 / 2 - 25, width: 50, height: 50, borderRadius: 50, globalCompositeOperation: "destination-out" } })
      // 第一行文字
      list.push({ type: "text", text: this.data.filmName, style: { left: 30, top: 88, fontSize: 36, color: "#ffffff", width: 300 } })
      list.push({
        type: "text",
        text: `${this.data.copyLanguage} ${this.data.ticketNum}张`,
        frontText: this.data.filmName,
        style: { left: 30, top: 86, fontSize: 24, color: "#ffffff", width: 200, frontSize: 36, spacing: 22 }
      })
      // 第二行文字
      list.push({
        type: "text",
        text: `${this.data.cinemaName} ${this.data.hallName}`,
        style: { left: 30, top: 134, fontSize: 24, color: "#ffffff", width: 500, frontSize: 36, spacing: 22 }
      })
      // 第三行文字
      list.push({
        type: "text",
        text: `${this.data.sDate} ${this.data.sTime}-${this.data.eTime}`,
        style: { left: 30, top: 178, fontSize: 24, color: "#ffffff", width: 550, frontSize: 36, spacing: 22 }
      })
      // 电影图片
      list.push({ type: "image", src: this.data.cover, imgType: 2, style: { left: 560, top: 54, width: 106, height: 148, borderRadius: 12 } })

      // 头部虚线
      list.push({ type: "line", style: { left: 32, top: 257, endLeft: 677, endTop: 257, color: "#ffffff", width: 3, lineDash: [15, 10] } })
      // 二维码背景
      list.push({ type: "rect", style: { top: 257, left: 0, width: 702, height: 420 + addHeight, backgroundColor: "#ffffff" } })
      // 二维码背景缺口
      list.push(
        { type: "rect", style: { top: 231, left: -35, width: 50, height: 50, borderRadius: 50, globalCompositeOperation: "destination-out" } },
        { type: "rect", style: { top: 231, left: 687, width: 50, height: 50, borderRadius: 50, globalCompositeOperation: "destination-out" } }
      )
      // 二维码
      list.push({ type: "image", src: this.qrcode, imgType: 1, style: { top: 287, left: 229, width: 244, height: 244 } })
      if (rowNum == 1) {
        // 只有一行取票码
        // 取票码背景
        list.push({ type: "rect", style: { top: 547, left: 140, width: 422, height: this.codeRowHeight, borderRadius: 12, backgroundColor: "#F4F6F7" } })
        // 取票码文字
        list.push({ type: "text", text: `取票码 ${this.data.qrCode}`, style: { left: 168, top: 600, fontSize: 30, color: "#333333", width: 550 } })
      } else {
        // 2行（序列号+验证码）
        for (let i = 0; i < rowNum; i++) {
          // 取票码背景
          list.push({ type: "rect", style: { top: 547 + i * this.codeRowHeight, left: 165, width: 372, height: this.codeRowHeight, borderRadius: 12, backgroundColor: "#F4F6F7" } })
          // 取票码文字
          list.push({
            type: "text",
            text: `${ticketInfo[i].name} ${ticketInfo[i].value}`,
            style: { left: 250, top: 600 + i * this.codeRowHeight, fontSize: 30, color: "#333333", width: 500 }
          })
        }
      }

      // 二维码背景底部虚线
      list.push({ type: "line", style: { left: 0, top: 676 + addHeight, endLeft: 702, endTop: 676 + addHeight, color: "#cccccc", width: 4, lineDash: [10, 15] } })
      // 描述区域背景图片
      list.push({
        type: "image",
        src: this.useImage("/zuimei-film-oss/1.0.0/images/mall-header-bg.png"),
        imgType: 2,
        style: { left: 0, top: 676 + addHeight, width: 702, height: 420 + addHeight }
      })
      // 年份
      list.push({ type: "text", text: `${year}`, style: { left: 56, top: 730 + addHeight, fontSize: 26, color: "#a24b37", width: 200 } })
      list.push({ type: "text", text: `MOVIE`, style: { left: 552, top: 730 + addHeight, fontSize: 26, color: "#a24b37", width: 200 } })
      list.push({
        type: "text",
        text: `“电影的魅力在于它能让我们进入另一个世界，我希望你能与我一起分享这趟奇妙旅程。”`,
        style: { left: 46, top: 790 + addHeight, fontSize: 26, color: "#333333", width: 600, rows: 2, lineHeight: 60, fontWeight: "bold" }
      })
      // 描述区域底部缺口
      const size = 702 / 9 - 10
      const gaps = Array(9)
        .fill(0)
        .map((_, index) => {
          return {
            type: "rect",
            style: { top: 1096 + addHeight - size / 2, left: index * size + index * 20 - 36, width: size, height: size, borderRadius: size, globalCompositeOperation: "destination-out" }
          }
        })
      list.push(...gaps)
      uni.showToast({
        title: "分享图生成中......",
        icon: "none"
      })
      this.$refs.poster.draw(list, (filePath) => {
        //绘制图片路径
        uni.previewImage({ urls: [filePath] })
        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.poster {
  position: absolute;
}
</style>
